<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            margin: auto;
            position: relative;
        }

        .img {
            width: 500px;
            height: 450px;
        }

        .danmu p {
            position: absolute;
            left: 500px;
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="" alt="" class="img">
        <div class="danmu">
            <!-- <p>
                <img src="" alt="">
                <span>内容</span>
            </p> -->
        </div>
        <input type="text">
        <button>发送</button>
    </div>









    <script>


        var oBtn = document.querySelector('button') ;
        var oInp = document.querySelector('input') ;
        var odm = document.querySelector('.danmu') ;

        oBtn.onclick = function() {
            var content = oInp.value ;
            if(content) {
                // 发送弹幕
                var oP = document.createElement('p');
                oP.innerHTML = `
                    <span>${content}</span>
                `
                odm.appendChild(oP) ;
                oP.style.color = rgb() ;
                oP.style.top = rand(0,300) + 'px' ;

                move(oP , 1 , -100 , 'left' , function() {
                    console.log('定时器已经结束了');
                    oP.remove()
                }) ;
               
            }
        }


        function move(ele, speed, end, direction , fn) {
            // 获取初始值
            var x = getCss(ele, direction);
            // 终点如果小于起点，说明是反向运动  速度就是负数
            // if(end < x) {
            //     speed = -speed
            // }
            speed = end < x ? -speed : speed;
            var t = setInterval(function () {
                x += speed;
                ele.style[direction] = x + 'px';
                // 距离终点还差一个speed 就直接到达终点且清除定时器
                if (Math.abs(end - x) <= Math.abs(speed)) {
                    // 路程不一定被速度整除   必须到达终点
                    x = end;
                    ele.style[direction] = x + 'px';
                    clearInterval(t);

                    // 运动结束以后想干一件事情
                    // oP.remove() 
                    fn()
                }
            }, 2)
        }



        function getCss(ele, prop) {
            if (window.getComputedStyle) {
                return parseInt(getComputedStyle(ele)[prop])
            }
            return parseInt(ele.currentStyle[prop])
        }


        function rgb() {
            var r = rand(0,256) ;
            var g = rand(0,256) ;
            var b = rand(0,256) ;
            return `rgb(${r},${g},${b})`
        }


        function rand(min ,max){
            return parseInt(Math.random() * (max - min)) + min
        }


        

    </script>

</body>

</html>